import React, { memo, Fragment } from 'react'

import { footerLinks, footerImages } from '@/common/local-data'

import { FooterWrapper, FooterLeft, FooterRight } from './style'

export default memo(function WYAppFooter() {
  return (
    <FooterWrapper>
      <div className="wrap-v2 content">
        <FooterLeft>
          <div className="music-link">
          {
            footerLinks.map((item, index) => {
              return (
                <Fragment key={index}>
                  <a href={item.link}>{item.title}</a>
                  <span>|</span>
                </Fragment>
              )
            })
          }
          </div>
          <div className="music-info">
            <span>网易公司版权所有©1997-2021</span>
            <span>
              杭州乐读科技有限公司运营：
              <a href="https://p1.music.126.net/Mos9LTpl6kYt6YTutA6gjg==/109951164248627501.png">浙网文[2021] 1186-054号</a>
            </span>
          </div>
          <div className="music-info">
            <span>违法和不良信息举报电话：0571-89853516</span>
            <span>
              举报邮箱：
              <a href="mailto:ncm5990@163.com">ncm5990@163.com</a>
            </span>
          </div>
          <div className="music-info">
            <span>粤B2-20090191-18</span>
            <a href="http://www.beian.miit.gov.cn/publish/query/indexFirst.action" rel="noopener noreferrer" target="_blank">
              工业和信息化部备案管理系统网站
            </a>
          </div>
        </FooterLeft>
        <FooterRight>
          {
            footerImages.map((item, index) => {
              return (
                <li key={index}>
                  <a href={item.link} className="music-unit"> </a>
                  <span className="music-amped"></span>
                </li>
              )
            })
          }
        </FooterRight>
      </div>
    </FooterWrapper>
  )
})